<template>
  <div class="green-font">绿色文字</div>
  <div class="flex flex-row">
    <a-breadcrumb>
      <a-breadcrumb-item>Home</a-breadcrumb-item>
      <a-breadcrumb-item><a href="">Application Center</a></a-breadcrumb-item>
      <a-breadcrumb-item><a href="">Application List</a></a-breadcrumb-item>
      <a-breadcrumb-item>An Application</a-breadcrumb-item>
    </a-breadcrumb>
  </div>
  <div class="flex flex-row justify-around">
    <a-button type="primary" @click="onClick">按钮</a-button>
    <a-button type="primary" @click="showModal">按钮</a-button>
    <a-button type="primary" loading>Loading</a-button>
  </div>
  <div class="flex flex-row">
    <SvgIcon name="face"></SvgIcon>
  </div>
  <div class="flex flex-row">
    <a-dropdown>
      <a class="ant-dropdown-link" @click.prevent>
        Hover me
        <DownOutlined />
      </a>
      <template #overlay>
        <a-menu>
          <a-menu-item>
            <a href="javascript:;">1st menu item</a>
          </a-menu-item>
          <a-menu-item>
            <a href="javascript:;">2nd menu item</a>
          </a-menu-item>
          <a-menu-item>
            <a href="javascript:;">3rd menu item</a>
          </a-menu-item>
        </a-menu>
      </template>
    </a-dropdown>
  </div>
  <div>
    <a-page-header
      style="border: 1px solid rgb(235, 237, 240)"
      title="Title"
      sub-title="This is a subtitle"
      @back="() => null"
    />
  </div>
  <div>
    <a-pagination :current="2" :total="50" show-less-items />
  </div>
  <div>
    <a-steps :current="1">
      <a-step>
        <!-- <span slot="title">Finished</span> -->
        <template #title>Finished</template>
        <template #description>
          <span>This is a description.</span>
        </template>
      </a-step>
      <a-step
        title="In Progress"
        sub-title="Left 00:00:08"
        description="This is a description."
      />
      <a-step title="Waiting" description="This is a description." />
    </a-steps>
  </div>
  <div>
    <a-form
      :model="formState"
      name="basic"
      :label-col="{ span: 8 }"
      :wrapper-col="{ span: 16 }"
      autocomplete="off"
      @finish="onFinish"
      @finishFailed="onFinishFailed"
    >
      <a-form-item
        label="Username"
        name="username"
        :rules="[{ required: true, message: 'Please input your username!' }]"
      >
        <a-input v-model:value="formState.username" />
      </a-form-item>

      <a-form-item
        label="Password"
        name="password"
        :rules="[{ required: true, message: 'Please input your password!' }]"
      >
        <a-input-password v-model:value="formState.password" />
      </a-form-item>

      <a-form-item name="remember" :wrapper-col="{ offset: 8, span: 16 }">
        <a-checkbox v-model:checked="formState.remember"
          >Remember me</a-checkbox
        >
      </a-form-item>

      <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
        <a-button type="primary" html-type="submit">Submit</a-button>
      </a-form-item>
    </a-form>
  </div>
  <div>
    <a-table
      :columns="columns"
      :row-key="record => record.login.uuid"
      :data-source="dataSource"
      :pagination="pagination"
      :loading="loading"
      @change="handleTableChange"
    >
      <template #bodyCell="{ column, text }">
        <template v-if="column.dataIndex === 'name'"
          >{{ text.first }} {{ text.last }}</template
        >
      </template>
    </a-table>
  </div>
  <a-modal v-model:visible="visible" title="Basic Modal" @ok="handleOk">
    <p>Some contents...</p>
    <p>Some contents...</p>
    <p>Some contents...</p>
  </a-modal>
</template>

<script lang="ts" setup>
import { message } from 'ant-design-vue'
import { DownOutlined } from '@ant-design/icons-vue'
import type { TableProps } from 'ant-design-vue'
import { usePagination } from 'vue-request'
import axios from 'axios'

const visible = ref<boolean>(false)

const showModal = () => {
  visible.value = true
}

const handleOk = (e: MouseEvent) => {
  console.log(e)
  visible.value = false
}

function onClick() {
  message.info('你好', 0)
}

interface FormState {
  username: string
  password: string
  remember: boolean
}
const formState = reactive<FormState>({
  username: '',
  password: '',
  remember: true,
})
const onFinish = (values: any) => {
  console.log('Success:', values)
}

const onFinishFailed = (errorInfo: any) => {
  console.log('Failed:', errorInfo)
}

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    sorter: true,
    width: '20%',
  },
  {
    title: 'Gender',
    dataIndex: 'gender',
    filters: [
      { text: 'Male', value: 'male' },
      { text: 'Female', value: 'female' },
    ],
    width: '20%',
  },
  {
    title: 'Email',
    dataIndex: 'email',
  },
]

type APIParams = {
  results: number
  page?: number
  sortField?: string
  sortOrder?: number
  [key: string]: any
}
type APIResult = {
  results: {
    gender: 'female' | 'male'
    name: string
    email: string
  }[]
}

const queryData = async (params: APIParams) => {
  const resp = await axios.get<APIResult>('https://randomuser.me/api?noinfo', {
    params,
  })
  return resp.data.results
}

const {
  data: dataSource,
  run,
  loading,
  current,
  pageSize,
} = usePagination(queryData, {
  pagination: {
    currentKey: 'page',
    pageSizeKey: 'results',
  },
})

const pagination = computed(() => ({
  total: 200,
  current: current.value,
  pageSize: pageSize.value,
}))

const handleTableChange: TableProps['onChange'] = (
  pag: { pageSize: number; current: number },
  filters: any,
  sorter: any
) => {
  run({
    results: pag.pageSize!,
    page: pag.current,
    sortField: sorter.field,
    sortOrder: sorter.order,
    ...filters,
  })
}
</script>
<style lang="less" scoped>
@import '@/assets/less/less-global-vars.less';

.green-font {
  // 变量来自assets/less/less-global-vars.less文件
  color: @fontColor;
}
</style>
